//加载，当加载完了之后运行调用函数
window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded(){

	var theCanvas = document.getElementById("canvas");

	if(!theCanvas || !theCanvas.getContext){
		return;
	}

	var context = theCanvas.getContext("2d");

	var radius = 100;

	var circle = {centerX: 250, centerY: 250, radius: 125, radian: 0, angle: 0};
	var ball = {x: 0, y: 0, speed: 1};

	function drawScreenLoop(){
		// 背景刷新
		context.fillStyle = '#ffffff';
		context.fillRect(0, 0, theCanvas.width, theCanvas.height);
		// 圆心
		context.fillStyle = "#000000";
		context.beginPath();
		context.arc(circle.centerX, circle.centerY, 3, 0, Math.PI*2, true);
		context.closePath();
		context.fill();
		// 圆盘
		context.strokeStyle = "#000000";
		context.lineCap = "square";
		context.beginPath();
		context.arc(circle.centerX, circle.centerY, circle.radius, 0, Math.PI*2, false);
		context.stroke();
		context.closePath();
		// cos和sin接收的参数为弧度，角度和弧度的转换为2*PI/360*x
		circle.radian = 2 * Math.PI / 360 * circle.angle;
		ball.x = circle.centerX + Math.cos(circle.radian) * circle.radius;
		ball.y = circle.centerY + Math.sin(circle.radian) * circle.radius;

		circle.angle += ball.speed;

		context.fillStyle = "#000000";
		context.beginPath();
		context.arc(ball.x, ball.y, 8, 0, Math.PI*2, true);
		context.closePath();
		context.fill();

		// 连接线
		context.strokeStyle = "black";
		context.lineWidth = 1;
		context.lineCap = "square";
		context.beginPath();
		context.moveTo(circle.centerX, circle.centerY);
		context.lineTo(ball.x, ball.y);
		context.stroke();
		context.closePath();
	}

	function gameLoop(){
		window.setTimeout(gameLoop, 20);
		drawScreenLoop();
	}

	// gameLoop();

	function drawSceen(){
		// 将画布设置为矩阵
		context.setTransform(1, 0, 0, 1, 0, 0);
		// 设置旋转的弧度（rotate接收参数为弧度）
		context.translate(125, 125);
		var angleInRadians = 45 * Math.PI / 180;
		// 旋转画布，如果没有设置原点，默认为画布的原点(0, 0)
		context.rotate(angleInRadians);
		context.fillStyle = "red";
		context.fillRect(-25, -25, 25, 25);

	}

	drawSceen();
}
